<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>sample2</title>
    <script type="text/javascript" src="../../lib/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/angularjs/1.3.0-beta.5/angular.js"></script>
</head>
<body ng-app>
<div id="test" ng-controller="BoxController">
    <div style="width: 100%;height: 100%;background-color: red;" ng-click="click()">
        <p>{{w}} x {{h}}</p>
        <p>W: <input type="text" ng-model="w" /></p>
        <p>H: <input type="text" ng-model="h" /></p>
    </div>
</div>
<script type="text/javascript">
    var BoxController = ["$scope", "$element", function ($scope, $element) {
        var e = $element.children().eq(0);
        $scope.w = e.width();
        $scope.h = e.height();

        $scope.click = function () {
            $scope.w = parseInt($scope.w) + 10;
            $scope.h = parseInt($scope.h) + 10;
        };

        $scope.$watch('w', function (to, from) {
            e.width(to);
        });

        $scope.$watch('h', function (to, from) {
            e.height(to);
        });
    }];
</script>
</body>
</html>